import { Navigate } from "react-router-dom"
import React from "react"
import Home from '../pages/Home/Home'
// import About from '../pages/About'
// import Login from '../pages/Login'
import NotFound from '../pages/NotFound'
import HomeRecommand from '../pages/Home/HomeRecommand'
import HomeRank from '../pages/Home/HomeRank'
import HomeSongMenu from '../pages/Home/HomeSongMenu'
import Category from '../pages/Category'
import Order from '../pages/Order'
import HomeRecommandDetail from '../pages/Home/HomeRecommandDetail'
import User from '../pages/User'

const About = React.lazy(() => import('../pages/About'))
const Login = React.lazy(() => import('../pages/Login'))

const routes = [
  {
    path: '/',
    element: <Navigate to='/home' />
  },
  {
    path: '*',
    element: <NotFound />
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: '/home/recommand',
        element: <HomeRecommand />,
        children: [
          { 
            path: '/home/recommand/detail/:id',
            element: <HomeRecommandDetail />
          }
        ]
      },
      {
        path: '/home/rank',
        element: <HomeRank />
      },
      {
        path: '/home/songMenu',
        element: <HomeSongMenu />
      }
    ]
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/category',
    element: <Category />
  },
  {
    path: '/order',
    element: <Order />
  },
  {
    path: '/user',
    element: <User />
  }
]

export default routes